<template>
	<view class="">
		<u-upload :action="baseUrl + 'api/Resource/UploadToOss'"
			:file-list="fileList"
			:header="uploadHeader" 
			 :max-count="maxCount"
			 :max-size="5 * 1024 * 1024"
			  :limitType="['png', 'jpg', 'jpeg', 'webp', 'gif']"
			 :source-type="['album']"
			 @on-success="onSuccess"
			 @on-remove="onRemove"
			 @on-change="onChange"
			 :show-progress="false"
			 ></u-upload>
	</view>
	
</template>

<script>
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
		export default {
			data(){
				return {
					resourceList:[],
				}
			},
			props:{
				maxCount:{
					type:Number,
					default:1
				},
				fileList:{
					type:Array,
					default:()=>{
						return []
					}
				}
			},
			computed:{
				...mapState(useUserStore,{
					uploadHeader(store){
					  return{
						  	Authorization: 'Bearer ' + store.access_token,
					  }
					}
				}),
			},
			watch:{
				fileList:{
					handler(newValue, oldValue){
						this.resourceList = newValue.map(item=>{return item.id});
						if(this.maxCount>1){
							this.$emit('onSuccess',this.resourceList.map(item=>{return {resourceId:item}}));
						}else{
							this.$emit('onSuccess',newValue.length!==0?newValue[0].id:null);
						}
					},
					deep:true
				}
			},
			methods:{
				onSuccess(data) {
					console.log('success');
					console.log(data);
					if(this.maxCount>1){
						this.resourceList.push(data.data[0].id);
						this.$emit('onSuccess',this.resourceList.map(item=>{return {resourceId:item}}));
					}else{
						this.$emit('onSuccess',data.data[0].id);
					}
				},
				onRemove(data) {
					if(this.maxCount>1){
						this.resourceList.splice(data,1)
						this.$emit('onRemove',this.resourceList.map(item=>{return {resourceId:item}}));
					}else{
						this.$emit('onRemove',);
					}
				},
				onChange(){
					console.log('change');
					// console.log(this.fileList);
				},
			}
		}
</script>

<style lang="scss" scoped>

</style>